@import url(https://fonts.googleapis.com/css?family=Arvo);
:root {
  --grey: #454545;
  --white: #fefefe;
  --blue: #7072ff;
  --green: #8aff70;
  --yellow: #fffe70;
  --orange: #ffab61;
  --red: #f16565;
}

body {
  width: 100vw;
  height: 100vh;
  position: relative;
  margin: 0;
  font-family: 'Arvo';
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--grey);
}
.canvas {
  position: relative;
  width: 60vw;
  height: 25vh;
  overflow: hidden;
}

.scrolling-area {
  width: 100%;
  height: 98%;
  position: relative;
}

.rabbit-main {
  width: 15%;
  height: 60%;
  margin: 0 auto;
  transform: translate3d(0, 0, 0) !important;
  position: relative;
  z-index: 0;
}
.rabbit-main .rabbit-body-part {
  position: absolute;
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}

.rabbit-main.rabbit-floor {
  top: 40%;
}

.rabbit-main.rabbit-floor .rabbit-body {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  top: 35%;
  left: 10%;
  z-index: 2;
  transform: translate3d(0, 0, 0) !important;
}
.rabbit-main.rabbit-floor .rabbit-tail {
  width: 13%;
  height: 13%;
  border-radius: 50%;
  top: 80%;
  left: 9%;
  transform: translate3d(0, 0, 0) !important;
}
.rabbit-main.rabbit-floor .rabbit-foot {
  width: 31%;
  height: 17%;
  border-radius: 50%;
  top: 88%;
  left: 38%;
  position: relative !important;
  transform: translate3d(0, 0, 0) !important;
}
.rabbit-main.rabbit-floor .rabbit-foot .foot-cover {
  background-color: var(--grey);
  height: 75%;
  width: 110%;
  top: 40%;
  position: relative !important;
  z-index: 0 !important;
}
.rabbit-main.rabbit-floor .rabbit-head {
  width: 32%;
  height: 32%;
  border-radius: 50%;
  top: 21%;
  left: 52%;
  z-index: 2 !important;
  transform: translate3d(0, 0, 0) !important;
}
.rabbit-main.rabbit-floor .rabbit-head .rabbit-eye {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background-image: linear-gradient(to top, #e8198b 0%, #c7eafd 100%);
  position: absolute;
  top: 40%;
  left: 45%;
}
.rabbit-main.rabbit-floor .rabbit-ear {
  width: 36%;
  height: 25%;
  border-radius: 50%;
  top: 0%;
  left: 0%;
}
.rabbit-main.rabbit-floor .rabbit-ear .ear-cover {
  background-color: var(--grey);
  height: 65%;  
  width: 100%;
  top: 40%;
  position: relative !important;
  z-index: 0 !important;
}
.rabbit-main.rabbit-floor .rabbit-ear-1 {
  transform: rotate(-146deg) translate3d(0, 0, 0);
  left: 38%;
  top: 8%;
  animation: ear-1-twitch 1s infinite;
}
@keyframes ear-1-twitch {
  0% {
    transform: rotate(-146deg);
  }
  25% {
    transform: rotate(-120deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  75% {
    transform: rotate(-115deg);
  }
  90% {
    transform: rotate(-146deg);
  }
}
.rabbit-main.rabbit-floor .rabbit-ear-2 {
  transform: rotate(-130deg) translate3d(0, 0, 0);
  left: 45%;
  top: 5%;
  animation: ear-2-twitch 1s infinite;
}
@keyframes ear-2-twitch {
  0% {
    transform: rotate(-130deg);
  }
  25% {
    transform: rotate(-110deg);
  }
  50% {
    transform: rotate(-120deg);
  }
  75% {
    transform: rotate(-115deg);
  }
  90% {
    transform: rotate(-146deg);
  }
}

/* jump */
.rabbit-main.rabbit-jump {
  animation: rabbit-jump 1s infinite;
}
.rabbit-main.rabbit-jump .rabbit-head {
  animation: rabbit-jump-head 1s infinite;
}
.rabbit-main.rabbit-jump .rabbit-body {
  animation: rabbit-jump-body 1s infinite;
}
.rabbit-main.rabbit-jump .rabbit-foot {
  animation: rabbit-jump-foot 1s infinite;
}
.rabbit-main.rabbit-jump .rabbit-tail {
  animation: rabbit-jump-tail 1s infinite;
}
.rabbit-main.rabbit-jump .rabbit-ear-1 {
  animation: rabbit-jump-ear-1 1s infinite;
}
.rabbit-main.rabbit-jump .rabbit-ear-2 {
  animation: rabbit-jump-ear-2 1s infinite;
}
@keyframes rabbit-jump {
  0% {
    top: 40%;
  }
  30% {
    top: 0%;
  }
  100% {
    top: 40%;
  }
}
@keyframes rabbit-jump-head {
  0% {
    top: 21%;
    left: 52%;
  }
  20% {
    top: 28%;
    left: 58%;
  }
  100% {
    top: 21%;
    left: 52%;
  }
}
@keyframes rabbit-jump-foot {
  0% {
    transform: rotate(0deg);
    top: 88%;
    left: 38%;
  }
  10% {
    transform: rotate(30deg);
    top: 94%;
    left: 25%;
  }
  100% {
    transform: rotate(0deg);
    top: 88%;
    left: 38%;
  }
}
@keyframes rabbit-jump-tail {
  0% {
    top: 80%;
    left: 9%;
  }
  5% {
    top: 76%;
    left: 6%;
  }
  10% {
    top: 73%;
    left: 4.5%;
  }
  15% {
    top: 68%;
    left: 3%;
  }
  25% {
    top: 64%;
    left: 2%;
  }
  40% {
    top: 68%;
    left: 3%;
  }
  60% {
    top: 73%;
    left: 4.5%;
  }
  80% {
    top: 77%;
    left: 6%;
  }
  100% {
    top: 80%;
    left: 9%;
  }
}
@keyframes rabbit-jump-ear-1 {
  0% {
    transform: rotate(-146deg) translate3d(0, 0, 0);
    left: 38%;
    top: 8%;
  }

  10% {
    transform: rotate(-150deg);
    left: 40%;
    top: 10%;
  }

  100% {
    transform: rotate(-146deg) translate3d(0, 0, 0);
    left: 38%;
    top: 8%;
  }
}

@keyframes rabbit-jump-ear-2 {
  0% {
    transform: rotate(-130deg) translate3d(0, 0, 0);
    left: 45%;
    top: 5%;
  }
  10% {
    transform: rotate(-140deg);
    left: 43%;
    top: 7%;
  }
  100% {
    transform: rotate(-130deg) translate3d(0, 0, 0);
    left: 45%;
    top: 5%;
  }
}

/* egg */
.egg-outer {
  width: 5%;
  height: 30%;
  /* background-color: red; */
  position: absolute;
  left: 110%;
  border-radius: 50%/60% 60% 40% 40%;
  top: 70%;
  overflow: hidden;
  animation: egg-scroll 4s linear infinite;
}
.egg-outer.egg-1 {
  transform: rotate(-20deg);
}
.egg-outer.egg-2 {
  transform: rotate(35deg);
  animation-delay: 1s;
}
.egg-outer.egg-3 {
  transform: rotate(-15deg);
  animation-delay: 2s;
}
.egg-outer.egg-4 {
  transform: rotate(20deg);
  animation-delay: 3s;
}

.egg-outer .egg-line {
  width: 120%;
  height: 20%;
  background-color: white;
}
.egg-outer .egg-line-1 {
  background-color: var(--red);
}
.egg-outer .egg-line-2 {
  background-color: var(--orange);
}
.egg-outer .egg-line-3 {
  background-color: var(--yellow);
}
.egg-outer .egg-line-4 {
  background-color: var(--green);
}
.egg-outer .egg-line-5 {
  background-color: var(--blue);
}

@keyframes egg-scroll {
  0% {
    left: 110%;
  }
  40% {
    left: 30%;
  }
  60% {
    left: 0%;
  }
  61% {
    left: -1%;
  }
  65% {
    left: -10%;
  }
  100% {
    left: -20%;
  }
}

/*  彩虹条 */
.bar {
  width: 100%;
  height: 2%;
  z-index: 2;
  border-radius: 10px;
  position: relative;
  background-image: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #7dc8e8,
    #5856d6,
    #ff2d55
  );
  animation: colorAnimation 1s ease-in infinite;
}
@keyframes colorAnimation {
  0% {
    background-image: linear-gradient(
      to right,
      #4cd964,
      #5ac8fa,
      #007aff,
      #7dc8e8,
      #5856d6,
      #ff2d55
    );
  }
  20% {
    background-image: linear-gradient(
      to right,
      #5ac8fa,
      #007aff,
      #7dc8e8,
      #5856d6,
      #ff2d55,
      #4cd964
    );
  }
  40% {
    background-image: linear-gradient(
      to right,
      #007aff,
      #7dc8e8,
      #5856d6,
      #ff2d55,
      #4cd964,
      #5ac8fa
    );
  }
  60% {
    background-image: linear-gradient(
      to right,
      #7dc8e8,
      #5856d6,
      #ff2d55,
      #4cd964,
      #5ac8fa,
      #007aff
    );
  }
  80% {
    background-image: linear-gradient(
      to right,
      #4cd964,
      #5ac8fa,
      #007aff,
      #7dc8e8,
      #5856d6,
      #ff2d55
    );
  }
  100% {
    background-image: linear-gradient(
      to right,
      #5856d6,
      #ff2d55,
      #4cd964,
      #5ac8fa,
      #007aff,
      #7dc8e8
    );
  }
}

/* 祝福语 */
.rabbit-text-box {
  position: relative;
  margin: 0 auto;
  width: 80vw;
  height: 20px;
  top: 0%;
}

.text {
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--white);
  font-size: 30pt;
  letter-spacing: 6px;
  animation: rainbow 11s alternate infinite forwards;
}

@keyframes rainbow {
  0% {
    color: #f03a3a;
  }
  10% {
    color: #8fdfef;
  }
  20% {
    color: #efe18f;
  }
  30% {
    color: #ef8f9e;
  }
  40% {
    color: #978fef;
  }
  50% {
    color: #ef8fd2;
  }
  60% {
    color: #e92ab0;
  }
  70% {
    color: #8fefd4;
  }
  80% {
    color: #8fef9e;
  }
  90% {
    color: #0cb6b6;
  }
  100% {
    color: #4175ed;
  }
}
